<template>
	<view>
		<view
			style="background: linear-gradient(180deg,#e0f4ff, #f8f9f9);display: inline-block;width: 750rpx;height: 100vh">

			<view style="width: 700rpx;margin:20rpx auto;">
				<u-image :src="info.cover" height='360'></u-image>
			</view>
 
			<list :list="list" :isBook='false'></list>

			<u-tabs :list="nav" :current="current" @change="change" bg-color='transparen'></u-tabs>


			<view class="u-flex u-row-between" style="flex-wrap: wrap;width:700rpx;margin:auto">

				<view v-if="tableList.length" v-for="(item,index) in tableList" :key="index"
					:style="{'background':item.color}" class="u-padding-20" style="position: relative;
				
				overflow: hidden;width:49%;color:#fff;border-radius:10rpx;margin-top:20rpx">
					<view style="position: absolute;right: -40rpx;top: -60rpx;">
						<w-wave :txt="nav[current].name">
							<view slot='center'>
								<u-image src='' width='40' height="40" shape='circle'></u-image>
							</view>
						</w-wave>
					</view>

					<view>￥{{item.basePrice}}/{{item.baseTime}}分钟</view>
					<view class='u-font-22 u-margin-top-10 u-margin-bottom-10'>计费规则</view>
					<view class="u-flex u-row-between">
						<view>
							{{item.carportName}}
						</view>
						<view class=''>
							<u-button @click='openDesk(item)' v-if="item.status==1" size='mini'
								:custom-style="{color:'#FF4646',background:'#ffc3c4'}" shape="circle">
								对局中</u-button>
							<u-button v-if="item.status==3" size='mini'
								:custom-style="{color:'#5766B9',background:'#b5ccf9'}" shape="circle">
								待开放</u-button>
							<u-button v-if="!item.status" size='mini'
								:custom-style="{color:'#fff',background:'#00A137'}" shape="circle"
								@click='openDesk(item)'>
								立即开台</u-button>
							<u-button v-if="item.status==2" size='mini'
								:custom-style="{color:'#fff',background:'#F9A825'}" shape="circle">
								清洁中</u-button>
						</view>
					</view>
				</view>

			</view>


		</view>


		<u-popup v-model="show" mode='center'>
			<view style="background: #fff;width: 700rpx;margin: auto;">

				<tags :user='user' :info='info' :tableInfo='tableInfo' @ok='SureTags' @endTable='endTable' v-if="show">
				</tags>
			</view>
			<!-- <charge></charge> -->

		</u-popup>

		<wr-state ref='mask' icon='checkmark-circle-fill' iconcolor='#52C41A' tags=' ' content="开台成功" @ready='ready'>
		</wr-state>

	</view>
</template>

<script>
	// item1.status==2?'维护中'
	// item1.status==0?'空闲中'
	// item1.status==1?`已使用时间`
	// item1.status==3?'装修中'
	import list from './components/list.vue'
	import charge from '../scan/components/charge.vue';
	import tags from '../scan/components/tags.vue'
	import wxpay from '@/common/wxpay.js'
	import wxLocation from '@/common/location.js';
	export default {
		components: {
			list,
			charge,
			tags
		},
		data() {
			return {
				show: false,
				tableList: [],
				nav: [{
						name: '台球'
					},
					{
						name: '棋牌'
					},
				],
				current: 0,
				id: '',
				info: {},
				list: [],
				tableInfo: {},
				user: ''

			}
		},

		onLoad(options) {
			if (options.id) {
				this.id = options.id;

			}
			this.getUser()
		},
		onShow() {
			this.show = false;
			this.storeDetail()
			this.getCarport()
		},
		methods: {


			getUser() {
				this.$u.api.userInfo().then(res => {
					this.user = res;
				})
			},
			change(e) {
				this.current = e;
				this.getCarport()
			},
			storeDetail() {
if(!this.$store.state.userAddress){
					
					const wx = new wxLocation();
					wx.getAddress().then(res => {
						this.$u.post('/index/storeDetail', {
							store_id: this.id,
							lat: res.result.location.lat,
							lng: res.result.location.lng,
						}).then(res => {
							this.list = [res];
							this.info = res;
							resolve(res)
						})
					}).catch(err => {
					
					})
				}else{
					this.$u.post('/index/storeDetail', {
						store_id: this.id,
						lat: this.$store.state.userAddress.result.location.lat,
						lng: this.$store.state.userAddress.result.location.lng,
					}).then(res => {
						this.list = [res];
						this.info = res;
					})
					
				}
				




			},
			getCarport() {
				this.$u.post('/index/carport', {
					store_id: this.id,
					type: this.current ? 2 : 1
				}).then(res => {
					this.changeColor(res)

				})

			},

			changeColor(res) {
				res.forEach((item, index) => {
					if (item.status == 3) {
						item.color = 'linear-gradient(180deg,#b5cdf1,#dfe8f5)'
					}
					if (item.status == 1) {
						item.color = ' linear-gradient(180deg,#f07a7d, #faae96 );'
					}
					if (item.status == 0) {
						item.color = 'linear-gradient(180deg,#27b67d, #18ed83);'
					}
					if (item.status == 2) {
						item.color = 'linear-gradient(180deg,#f9a825, #ffdda7 );'
					}
				})
				this.tableList = res;
			},
			SureTags(e) {
				this.$u.post('/indent/orderStart', {
					carport_id: e,
				}).then(res => {
					if (Array.isArray(res)) {
						uni.showModal({
							title: '确认开台吗',
							success: (res1) => {
								if (res1.confirm) {
									this.openDesk({
										id: e
									})
									this.$refs.mask.show = true
								}
							}
						})
					} else {
						const wx = new wxpay(res);
						wx.pay().then(res => {
							this.openDesk({
								id: e
							})
							this.$refs.mask.show = true
						}).catch(err => {})
					}

				})
			},
			endTable(e) {
				uni.navigateTo({
					url: '/pages/scan/total?id=' + e
				})
				this.show = false
			},
			openDesk(item) {
				this.$u.post('/index/carportDetail', {
					id: item.id,
				}).then(res => {
					console.log(res)
					this.tableInfo = res;
					this.show = true


				})
			}
		},
	}
</script>

<style>
</style>